<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>天猫注册</title>
  <link rel="stylesheet" href="./css/come01.css">
  <link rel="stylesheet" href="./css/signin.css">
  <!-- icon -->
  <link rel="stylesheet" href="./font_3447033_tcrd8mx9lh8/iconfont.css">
</head>
<body>
  <div class="head">
    <div class="center">
     <div>
      <ul>
        <li><a href="#">亲,请登录</a></li>
        <li><a href="#">免费注册</a></li>
        <li><a href="#">手机逛淘宝</a></li>
        <li><a href="#">网页无障碍</a></li>
      </ul>
     </div>
     <div>
      <ul>
        <li><a href="#">淘宝网首页</a></li>
        <li><a href="#">我的淘宝</a><span></span>
        <div>
          <p><a href="">已买到的宝贝</a></p>
          <p><a href="">我的足迹</a></p>
        </div>
        </li>
        <li><a href="#"><i class="icon iconfont">&#xebbe;</i> &nbsp;购物车</a></li>
        <li><a href="#"><i class="icon iconfont">&#xe647;</i>&nbsp;收藏夹</a><span></span>
        <div>
          <p><a href="">收藏的宝贝</a></p>
          <p><a href="">收藏的店铺</a></p>
        </div>
        </li>
        <li><a href="#">商品分类</a></li>
        <li><a href="#">免费开店</a></li>
      </ul>
     </div>
    </div>
  </div>
  <div class="img">
    <div class="center">
      <img src="./img_03/tao.bao.wang.png" alt=""><span>用户注册</span>
      <div>
         <div></div>
         <div>
          <!-- 手机号 1 -->
            <div>
               <div>
                <label for="phone">手机号码</label>
               </div>
               <div>
                <select name="" id="">
                  <option value="">中国大陆 +86</option>
                  <option value="">中国大陆 +86</option>
                  <option value="">中国大陆 +86</option>
                  <option value="">中国大陆 +86</option>
                  <option value="">中国大陆 +86</option>
                  <option value="">中国大陆 +86</option>
                  <option value="">中国大陆 +86</option>
                  <option value="">中国大陆 +86</option>
                  <option value="">中国大陆 +86</option>
                  <option value="">中国大陆 +86</option>
                  <option value="">中国大陆 +86</option>
                  <option value="">中国大陆 +86</option>
                  <option value="">中国大陆 +86</option>
                  <option value="">中国大陆 +86</option>
                  <option value="">中国大陆 +86</option>
                  <option value="">中国大陆 +86</option>
                  <option value="">中国大陆 +86</option>
                  <option value="">中国大陆 +86</option>
                  <option value="">中国大陆 +86</option>
                  <option value="">中国大陆 +86</option>
                  <option value="">中国大陆 +86</option>

                </select>
               </div>
               <div><input type="text" id="phone" placeholder="请输入你的手机号" name="phone"></div>
            </div>
             <!-- 验证码 2-->
            <div>
              <div><label for="yanzhengma">验证码</label></div>
              <div><input type="text" placeholder="请输入验证码" id="yzm"> <span id="pdp">获取验证码</span></div>
            </div>
            <!-- 注册按钮  3 -->
            <div><button id="zhuce">注册</button></div>
            <!-- 协议  4  -->
            <div>
              <input type="checkbox" id="xieyi">
             <div> 已阅读并同意以下协议 <a href="#">淘宝平台服务协议</a> 、<a href="#">隐私权政策</a> 、<a href="#">法律声明</a> 、<a href="#">支付宝及客户端服务协议</a></div>
            </div>
            <!-- 5  -->
            <div>
              <a href="#">切换成企业账户注册</a>
            </div>
            <!-- 6 -->
            <div id="zc_hide">手机格式不正确，请重新输入</div>


         </div>

      </div>
    </div>
    <div class="foot">
      <div>
        <div>
          <a href="#">阿里巴巴集团</a><span>|</span>
          <a href="#">阿里巴巴国际站</a><span>|</span>
          <a href="#">阿里巴巴中国站</a><span>|</span>
          <a href="#">全球速卖通</a><span>|</span>
          <a href="#">淘宝网</a><span>|</span>
          <a href="#">天猫</a><span>|</span>
          <a href="#">聚划算</a><span>|</span>
          <a href="#">一淘</a><span>|</span>
          <a href="#">阿里妈妈</a><span>|</span>
          <a href="#">阿里云计算</a><span>|</span>
          <a href="#">云OS</a><span>|</span>
          <a href="#">万网</a><span>|</span>
          <a href="#">支付宝</a>
        </div>
       
        <div>
          <a href="#">关于淘宝</a>
          <a href="#">合作伙伴</a>
          <a href="#">营销中心</a>
          <a href="#">联系客服</a>
          <a href="#">开放平台</a>
          <a href="#">诚征英才</a>
          <a href="#">联系我们</a>
          <a href="#">网站地图</a>
          <a href="#">法律声明及隐私权政策</a>
          <a href="#"> © 2022 Taobao.com 版权所有</a>
        </div>
    
        <div>
         <p> 网络文化经营许可证：文网文[2010]040号|增值电信业务经营许可证：浙B2-20080224-1|信息网络传播视听节目许可证：1109364号
        </p>
        </div>
      </div>
     
    
    
    
    </div>
  </div>

  
  </div>
</body>
</html>
<script src="./js/jquery.min.js"></script>
<script>
  $(function(){
    $('#phone');$('#pdp');$('#zhuce');$('#zc_hide');$('#yzm');
    $('#pdp').on('click',function(){
      let reg = /^(?:(?:\+|00)86)?1[3-9]\d{9}$/;
      let v = $('#phone').val();
    
      let result = reg.test(v);
      console.log( $('#zc_hide'));
      if(result === false){
        $('#zc_hide').css('display','block');
        console.log(1);
         setTimeout(() => {
          $('#zc_hide').css('display','none');
        }, 3000);
      }
    })
   

  })
</script>